import React, { useState, useEffect, useRef } from 'react';
import { TouchableHighlight, Modal, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView, Dimensions, Animated, PanResponder, TextInput } from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
import { AntDesign } from '@expo/vector-icons';
import ActionButton from 'react-native-action-button';
import { Toast } from 'antd-mobile-rn';
import Swiper from 'react-native-swiper'
import { Entypo } from '@expo/vector-icons';
import axios from '../../api/axios';
import { useAuth } from '../../context/AuthProvider';
import { useFocusEffect } from '@react-navigation/native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                padding: 2,
                ...style
            }
        }>
            <Text style={{ color: color, alignItems: 'center' }}>{children}</Text>
        </TouchableOpacity>
    )
}

const Address = ({ navigation }) => {
    const { user } = useAuth()
    const [address, setAddress] = useState([])
    const [select, setSelect] = useState(0)
    const [change, setChange] = useState(0)
    const [modalVisible, setModalVisible] = useState(false);
    useEffect(() => {
        navigation.setOptions({
            title: '收货地址',
            headerLeft: () => (
                <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
            )
        })
        axios.post('/userreceive/getmyaddress', { userid: user.userid }).then(res => {
            setAddress(res.data)
        })
    }, [change])
    useFocusEffect(React.useCallback(() => {
        axios.post('/userreceive/getmyaddress', { userid: user.userid }).then(res => {
            setAddress(res.data)
        })
    }, []))
    const setDefault = (addressid) => {
        axios.post('/userreceive/updatedefault', { userid: user.userid, addressid: addressid }).then(res => {
            if (res.code == 200) {
                setChange(change + 1)
            }
        })
    }
    const delAddress = (addressid) => {
        axios.post('/userreceive/deladdress', { addressid: addressid }).then(res => {
            if (res.code == 200) {
                setChange(change + 1)
            }
        })
    }
    return (
        <ScrollView contentContainerStyle={{alignItems: 'center'}}>
            {
                address.map((item, index) => {
                    return <View style={{ width: '90%', padding: '4%', backgroundColor: '#fff', borderWidth: 1, borderColor: 'lightgray', marginBottom: 2 }}>
                        <Text>{item.address}</Text>
                        <Text>{item.name}</Text>
                        <Text style={{ marginBottom: 5 }}>{item.phone}</Text>
                        {
                            item.isdefault ?
                                <Text style={{color: 'red'}}>当前地址</Text>
                                : <Button title="选择地址" onPress={() => setDefault(item.addressid)}></Button>
                        }
                        <Button title='删除地址' style={{ backgroundColor: 'red' }} color='#FF6450' onPress={() => delAddress(item.addressid)}></Button>
                    </View>
                })
            }
            <Button title='添加新地址' onPress={()=>navigation.navigate('addaddress')}></Button>
        </ScrollView>
    )
}
const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});
export default Address